Skip to content

Fix deprecation warning with Sass 1.77.7 #477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Fix deprecation warning with Sass 1.77.7 #477

wants to merge 1 commit into from

Conversation

@julien-deramond
Copy link
Member

Warning

This PR is a draft probably tackling only a part of the problem

Warning

#474 (comment) has not been tested out as it might be another issue

Closes #474

Description

This PR is an attempt to fix #474.

Context 
git checkout main
npm i [email protected]
npm run test

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ╷
153 │ ┌     .enable-rfs &,
154 │ │     &.enable-rfs {
155 │ │       @content;
156 │ │     }
    │ └─── nested rule
... │
299 │           #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    scss.scss 299:9            @content
    scss.scss 167:7            -rfs-media-query-rule()
    scss.scss 298:7            rfs()
    test/sass/_main.scss 38:5  @import
    test/sass/test-4.scss 2:9  root stylesheet

Warning: 18 repetitive deprecation warnings omitted.

The issue comes from our internal mixins _rfs-rule and _rfs-media-query-rule that can both render @content; without any selector; that causes for instance this kind of rules:

@content;

.enable-rfs &,
&.enable-rfs {
   @content;
}

@content;

Since there are supposed to be internal mixins, I supposed that I could modify them without any problems for users, and chose to only extract the problematic rule from _rfs-media-query-rule, and use it before calling _rfs-rule:

@if $rfs-class == enable {
    @if $rfs-mode == min-media-query {
      @content;
    }
}

Maybe there's a smarter way of doing it, but I'm not that familiar with this repo.

@julien-deramond julien-deramond added the sass This issue only applies to the sass version label Sep 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

sass This issue only applies to the sass version

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Deprecation warning regarding the order of mixed nested declaration

2 participants

@julien-deramond